<style lang="stylus" scoped>
  .myli
    display flex
    padding 18px 0
    margin 0 18px
    .left
      width 60px
      height 60px
      flex 0 0 60px
      border-radius 6px
      overflow hidden
      margin-right 10px
      img 
        width 100%
        height 100%
    .right
      flex 1
      position relative
      .name
        font-size 14px
        color rgb(7,17,27)
        line-height 14px
        margin-bottom 8px
      .description
        font-size 10px
        color rgb(147,153,159)
        line-height 12px
        margin-bottom 8px
        .one
          margin-right 8px
      .price
        .new
          font-size 14px
          color rgb(240,20,20)
          font-weight 700
          line-height 14px
          margin-right 8px
        .old
          font-size 10px
          color rgb(147,153,159)
          line-height 14px
</style>


<template>
  <li class="myli">
    <div class="left">
      <img :src="food.image">
    </div>
    <div class="right" @click="toFood">
      <h2 class="name">{{food.name}}</h2>
      <div class="description">{{food.description}}</div>
      <p class="description"><span class="one">月售{{food.sellCount}}</span><span>好评率{{food.rating}}%</span></p>
      <p class="price"><span class="new">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span></p>
      <addbtn :food="food"></addbtn>
    </div>
  </li>
</template>

<script>
import addbtn from '@/components/addbtn.vue'
export default {
  props:{
    food:{
      type:Object
    },
    seller:{
      type:Object
    },
    goods:{
      type:Array
    }
  },
  components: {
    addbtn
  },
  methods:{
    add() {
      if(!this.food.num) {
        this.$set(this.food,'num',1)
      }else{
        this.food.num++
      }
    },
    prev() {
      this.food.num--
    },
    toFood() {
      this.$router.push({
        name: 'food',
        params: {
          food: this.food,
          seller: this.seller,
          goods: this.goods
        }
      })
    }
  }

}
</script>
